<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Single File Button - Standalone Showcase from digitarald.de</title>

	<meta name="author" content="Harald Kirschner, digitarald.de" />
	<meta name="copyright" content="Copyright 2009 Harald Kirschner" />

	<!-- Framework CSS -->
	<link rel="stylesheet" href="http://github.com/joshuaclayton/blueprint-css/raw/master/blueprint/screen.css" type="text/css" media="screen, projection">
	<link rel="stylesheet" href="http://github.com/joshuaclayton/blueprint-css/raw/master/blueprint/print.css" type="text/css" media="print">
	<!--[if IE]><link rel="stylesheet" href="http://github.com/joshuaclayton/blueprint-css/raw/master/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
<!--[if lte IE 7]>
	<script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script>
<![endif]-->


	<script type="text/javascript" src="../../../js/mootools.js"></script>

	<script type="text/javascript" src="../../source/Fx.ProgressBar.js"></script>

	<script type="text/javascript" src="../../source/Swiff.Uploader.js"></script>

	<script type="text/javascript" src="http://digitarald.de/project/roar/1-0/source/Roar.js"></script>

	<link rel="stylesheet" href="http://digitarald.de/project/roar/1-0/assets/Roar.css" type="text/css">


	<!-- See script.js -->
	<script type="text/javascript">
		//<![CDATA[

		/**
 * FancyUpload Showcase
 *
 * @license		MIT License
 * @author		Harald Kirschner <mail [at] digitarald [dot] de>
 * @copyright	Authors
 */

window.addEvent('domready', function() {

	// One Roar instance for our notofications, positioned in the top-right corner of our demo.
	/*var log = new Roar({
		container: $('demo'),
		position: 'topRight',
		duration: 5000
	});*/
	
	var link = $('select-0');
	var linkIdle = link.get('html');
	
	function linkUpdate() {
		if (!swf.uploading) return;
		var size = Swiff.Uploader.formatUnit(swf.size, 'b');
		link.set('html', '<span class="small">' + swf.percentLoaded + '% of ' + size + '</span>');
	}

	// Uploader instance
	var swf = new Swiff.Uploader({
		path: '../../source/Swiff.Uploader.swf',
		url: '../script.php',
		verbose: true,
		queued: false,
		multiple: false,
		target: link,
		instantStart: true,
		typeFilter: {
			'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'
		},
		fileSizeMax: 2 * 1024 * 1024,
		onSelectSuccess: function(files) {
			if (Browser.Platform.linux) window.alert('Warning: Due to a misbehaviour of Adobe Flash Player on Linux,\nthe browser will probably freeze during the upload process.\nSince you are prepared now, the upload will start right away ...');
			alert('Starting Upload', 'Uploading <em>' + files[0].name + '</em> (' + Swiff.Uploader.formatUnit(files[0].size, 'b') + ')');
			this.setEnabled(false);
		},
		onSelectFail: function(files) {
			alert('<em>' + files[0].name + '</em> was not added!', 'Please select an image smaller than 2 Mb. (Error: #' + files[0].validationError + ')');
		},
		appendCookieData: true,
		onQueue: linkUpdate,
		onFileComplete: function(file) {
			
			// We *don't* save the uploaded images, we only take the md5 value and create a monsterid ;)
			if (file.response.error) {
				alert('Failed Upload', 'Uploading <em>' + this.fileList[0].name + '</em> failed, please try again. (Error: #' + this.fileList[0].response.code + ' ' + this.fileList[0].response.error + ')');
			} else {
				var md5 = JSON.decode(file.response.text, true).hash; // secure decode
				
				alert('Successful Upload', 'an MD5 hash was created from <em>' + this.fileList[0].name + '</em>: <code>' + md5 + '</code>.<br />gravatar.com generated a fancy and unique monsterid for it, since we did not save the image.');
				
				var img = $('demo-portrait');
				img.setStyle('background-image', img.getStyle('background-image').replace(/\w{32}/, md5));
				img.highlight();
			}
			
			file.remove();
			this.setEnabled(true);
		},
		onComplete: function() {
			link.set('html', linkIdle);
		}
	});

	// Button state
	link.addEvents({
		click: function() {
			return false;
		},
		mouseenter: function() {
			this.addClass('hover');
			swf.reposition();
		},
		mouseleave: function() {
			this.removeClass('hover');
			this.blur();
		},
		mousedown: function() {
			this.focus();
		}
	});

});

		//]]>
	</script>



	<!-- See style.css -->
	<style type="text/css">
		/* Basic layout */

h4 {
	margin-top: 1.25em;
}

a {
	padding: 1px;
}

a:hover, a.hover {
	color: red;
}

/* demo elements */

#demo-portrait {
	float: left;
	position: relative;
	width: 130px;
	height: 153px;
	border: 1px solid #eee;
	background-position: 1px 1px;
	background-repeat: no-repeat;
}

#demo-portrait a {
	position: absolute;
	left: 1px;
	right: 1px;
	bottom: 1px;
	padding: 0;
	line-height: 22px;
	display: block;
	text-align: center;
}	</style>


</head>
<body>

	<div class="container">

		<h1><a href="http://digitarald.de/project/fancyupload/">FancyUpload</a> Standalone Showcase from <a href="http://digitarald.de/">digitarald.de</a></h1>

		<h2>Single File Button</h2>



		<!-- See index.html -->
		<div>
			<div id="demo-portrait" style="background-image: url(http://www.gravatar.com/avatar/ad4c26a01dc657d9b4fc3dc9c8299927?s=128&amp;d=monsterid)">
	<a href="#" id="select-0" title="Please upload only images, maximal 2 Mb filesize!">Upload new Photo</a>
</div>		</div>


	</div>

	<div class="container quiet" style="line-height: 5em;">
		© 2008-2009 by <a href="http://digitarald.de/">Harald Kirschner</a> and available under <a href="http://www.opensource.org/licenses/mit-license.php">The MIT License</a>
	</div>

</body>
</html>
